<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动定位</title>
		<style>
			/* 每个div设置宽高：300px 倒角50% 设置字体10em 垂直居中*/
			
			span{
				width: 300px;
				height: 300px;
				border-radius: 50%;
				font-size: 10em;
				
				text-align: center;
				line-height: 300px;
				color: #fff;
				/* 盒子阴影：块元素上 */
				/* 盒子阴影的属性值 X Y 模糊半径 扩散半径 内外阴效果 颜色 */
				box-shadow: 5px 5px 100px 20px  #ffaa00 inset;
				/* 浮动属性 */
				float: left;
				float: right;
				f loat: none;
			}
			span.d1{
				background-color: #aaaaff;
			}
			span.d2{
				background-color: #55aa00;
			}
			
			span.d3{
				background-color: #ffaa7f;
			}
			span.d4{
				background-color: #ffaaff;
			}
			span.d5{
				background-color: #aaaa7f;
			}
		</style>
	</head>
	<!-- 定位5种：1.普通留定位【文档留定位】 将元素按照块 行 行块特点排列
	             2.浮动定位：将元素飘起来，作用：左右布局
				 定义：让元素脱离文档流的一种定位方式，用于页面文本和图片环绕以及布局，元素
				 一旦浮动，转换为块元素
				 floot浮动属性：left right none
				 3.相对定位：相对于父级 按照body位置执行 占用文档流
				 4.绝对定位：针对与父级 按照页面左顶角执行 失去文档流
				 左栏弹出：相对定位+绝对定位实现【Jquery框架：页面动态效果】
				 5.固定定位：将元素固定定位在页面指定位置-->
				 <!-- 浮动元素 -->
				 <span class="d1">1</span>
				 <span class="d2">2</span>
				 <span class="d3">3</span>
				 <span class="d4">4</span>
				 <span class="d5">5</span>
	<body>
	</body>
</html>